<template>
    <div style="background-color: #ebeef5">
      <el-row
        type="flex"
        class="row-bg"
      >
        <el-col
          :span="6"
          class="left_m"
          style="background-color: white; font-size: 16px; overflow: auto"
          :style="heightY"
        >
          <el-form
            :model="queryForm"
            label-width="100px"
            class="demo-ruleForm"
            style="margin-left:10px"
          >
            <el-form-item />
            <el-form-item label="搜索关键词：">
              <el-input
                size="mini"
                style="width: 78%; font-size: 16px"
                placeholder="请输入"
                v-model="queryForm.textTitle"
              />
            </el-form-item>
            <el-form-item label="热门标签：">
              <el-tag
                v-for="(item, index) in items"
                size="small"
                style="font-size: 16px"
                @click="changeColor(index)"
                :key="index"
                :effect="item.tagEffect"
              >
                {{ item.label }}
              </el-tag>
            </el-form-item>
          </el-form>
  
          <div class="search_b">
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-search"
              @click="getTextList"
            >
              查询
            </el-button>
            <el-button
              type=""
              plain
              size="mini"
              icon="el-icon-search"
              @click="rest"
            >
              重置
            </el-button>
          </div>
        </el-col>
  
        <el-col
          :span="18"
          style="margin-left: 10px"
        >
          <div class="">
            <!--table-->
            <div
              class="doc-l"
              :style="heightY2"
            >
              <div
                class="doc-i"
                v-for="(item, index) in fileTableData"
                :key="index"
              >
                <div class="doc-it">
                  <p class="doc-it-tit">
                    {{ item.textTitle }}
                  </p>
                  <span class="doc-it-tab">
                    <span>{{
                      item.textOrder == null ? "暂无" : item.textOrder
                    }}</span>
                    <!-- <span>{{ item.fileSubTitle }}</span> -->
                    <span>{{ item.modifyUserName }}</span>
                    <span>{{
                      item.addDate
                        ? item.addDate.substring(0, 10)
                        : ""
                    }}</span>
                  </span>
                  <div class="doc-it-bth">
                    <el-button
                      type=""
                      plain
                      size="mini"
                      icon="el-icon-search"
                      @click="docText(item)"
                    >
                      文本
                    </el-button>
                  </div>
                </div>
                <div class="doc-ib">
                  <!-- <p>{{ item.textContent.replace(/<[^>]+>/g, "") }}</p> -->
                  <p style="margin-top: 5px">
                    关键词>> <span>{{ item.textLabel }}</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- 分页-->
            <div
              style="
                width: 100%;
                float: left;
                text-align: center;
                margin-top: 5px;
              "
            >
              <vxe-pager
                background
                align="left"
                :current-page.sync="page.currentPage"
                :page-size.sync="page.pageSize"
                :total="page.totalResult"
                :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'JumpNumber',
                  'NextPage',
                  'NextJump',
                  'Sizes',
                  'FullJump',
                  'Total',
                ]"
              />
            </div>
          </div>
        </el-col>
      </el-row>
      <helpShowTextPage ref="helpShowTextPage" />
    </div>
  </template>
  <script>
    import { helpTextList } from "@/api/datacentersg/archives/helpText";
    import { getList } from "@/api/datacentersg/archives/label";
    import helpShowTextPage from "./helpShowTextPage";
    import store from "@/store";
    export default {
      components: { helpShowTextPage },
      data () {
        return {
          page: {
            currentPage: 1,
            pageSize: 20,
            totalResult: 0,
          },
          queryForm: {
            textTitle: ``,
            textContent: ``,
            addDateStart: ``,
            addDateEnd: ``,
          },
          heightY: { height: `${window.innerHeight - 120}px` },
          heightY2: { height: `${window.innerHeight - 173}px` },
          addDate: ``,
          activeName: ``,
          checkedNodes: ``,
          options: [],
          fileTableData: [],
          items: [],
          searchkeys: [],
        }
      },
      created () {
        this.getTextList();
        this.getTagDataList();
      },
      methods: {
        // 获取数据
        getTextList () {
          const params = {
            userId: store.getters.userId.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: {
              textBussinessTypeCode: 111,
              pageSize: this.page.pageSize,
              currentPage: this.page.currentPage,
              textTitle: this.queryForm.textTitle,
            },
          };
          if (this.searchkeys.length) {
            params.data.textLabel =  this.searchkeys.join(`,`)
          }
          helpTextList(params).then((data) => {
            if (data.result) {
              this.fileTableData = data.resultdata.data;
              this.page.totalResult = data.resultdata.count;
            }
          });
        },
        changeColor (id) {
          // 点击改变主题
          const baginState = this.items[id].tagEffect == `plain`;
          this.items[id].tagEffect =
            this.items[id].tagEffect == `plain` ? `dark` : `plain`;
          this.searchkeys = [];
          for (let i = 0; i < this.items.length; i++) {
            if (this.items[i].tagEffect == `dark`) {
              this.searchkeys.push(this.items[i].label);
            }
          }
          this.getTextList(this.selectedTab, this.searchkeys.join(`,`));
        },
        getTagDataList () {
          const params = {
            data: {
              fileBusinessTypeId: `111`,
              pageSize: this.page.pageSize,
              currentPage: this.page.currentPage,
            },
            userId: store.getters.userId.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
          };
          getList(params).then((data) => {
            if (data.result) {
              const items = [];
              data.resultdata.data.forEach(function (obj, index) {
                items.push({
                  label: obj.labelName,
                  index: index,
                  tagEffect: `plain`,
                });
              });
  
              this.items = items;
            }
          });
        },
        dataPickerChange () {
          this.queryForm.addDateStart = this.fileReleaseUnitDate[0];
          this.queryForm.addDateEnd = this.fileReleaseUnitDate[1];
        },
        docText (row) {
          this.$refs.helpShowTextPage.init(row)
        },
        rest () {
          this.queryForm.textTitle=``;
          this.queryForm.textContent=``;
          this.searchkeys=[];
        },
      },
    }
  </script>
  
    <style scoped lang="scss">
  * {
    scrollbar-width: thin;
    scrollbar-color: #333 transparentize;
  }
  
  /*.left_m{
      height:;
    }*/
  .search_d {
    margin: 20px;
    font-size: 16px !important;
  }
  
  .el-tag--small {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
    margin: 3px;
  }
  
  .search_t {
    margin-bottom: 5px;
    font-size: 16px;
  }
  
  .search_b {
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 30%;
  }
  
  .doc-l {
    width: 100%;
    overflow-y: scroll;
  }
  
  .doc-i {
    background-color: white;
    width: 100%;
    height: auto;
    padding: 20px 20px 0 20px;
    margin-bottom: 10px;
  }
  
  .doc-i:last-child {
    margin-bottom: 0px;
  }
  
  .doc-it {
    margin-bottom: 10px;
  }
  
  .doc-it-co {
    padding: 10px;
    border: solid 1px #0e9aef;
    border-radius: 10px;
    float: left;
    margin-right: 30px;
    width: 150px;
    text-align: center;
  }
  
  .doc-it-tit {
    font-size: 0.938vw;
    font-weight: 700;
    margin-bottom: 0.26vw;
  }
  
  .doc-it-tab span {
    font-size: 14px;
    border-left: solid 1px #999999;
    padding: 0 10px;
  }
  
  .doc-it-tab span:first-child {
    border-left: none;
    padding-left: 0;
  }
  
  .doc-it-bth {
    float: right;
    margin-right: 50px;
    margin-top: -5px;
  }
  
  .doc-ib {
    width: 100%;
    padding: 5px 10px;
  }
  
  .doc-ib p {
    font-size: 14px;
    color: #999999;
  }
  
  .el-tag {
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
  }
  </style>
    <style scoped>
  .search_cascader .el-checkbox__inner {
    border: 2px solid #999 !important;
  }
  
  .el-row--flex {
    padding: 10px;
  }
  /deep/.is-leaf.el-tree-node_expand-icon{
      display:none;
  }
  </style>
  